<template>
	<view class="find">
		<view class="uni-padding-wrap">
			<view class="page-section swiper">
				<view class="page-section-spacing">
					<swiper
							class="swiper"
							:vertical="vertical"
							@animationfinish="onSwipScroll"
							:indicator-dots="indicatorDots"
							:autoplay="autoplay"
							:interval="interval"
							:duration="duration"
							:style="{height: swiperHeight}"
					>
						<swiper-item :id="'videoitem_' + index" v-for="(item, index) in videoList" :key="index">
<!--							<video-->
<!--									class="video"-->
<!--									:id="'video_' + index"-->
<!--									loop-->
<!--									:direction="direction"-->
<!--									:src="item.url"-->
<!--									@error="videoErrorCallback"-->
<!--									:autoplay="autoplays"-->
<!--									controls-->
<!--							></video>-->
							<image src="/static/img/luzhi.png" style="height: 100%;width: 100%" mode="scaleToFill"></image>
							<view class="plays">
								<view class="play_begin"><text class="iconfont play">&#xe619;</text></view>
							</view>

							<view class="tools_right">
								<view class="tools_r_li" @tap="changeFollow(item, index)">
									<text class="iconfont play_icon" :class="item.follow ? 'follow_active' : ''">&#xe61e;</text>
									<view class="tools_r_num">99+</view>
								</view>
								<view class="tools_r_li" @tap="getMessage">
								    <text class="iconfont play_icon">&#xe618;</text>
								    <view class="tools_r_num">99+</view>
								</view>
								<view class="tools_r_li">
									<text class="iconfont play_icon">&#xe61d;</text>
									<view class="tools_r_num">99+</view>
								</view>
							</view>
							<!-- 底部作品描述 -->
							<view class="production_box">
								<view class="production_gushiname">{{ item.gushiname }}</view>
								<view class="production_name">@{{ item.username }}</view>
								<view class="production_des">
									{{ item.content }}
								</view>
								<view class="i_to_lu">我也要录</view>
							</view>
							<view class="load"><image src="/static/img/img01.png" class="img" mode="scaleToFill"></image></view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		<view class="find_message">
			<uni-popup ref="message" :maskClick="false" type="bottom">
				<view class="popup_box">
					<view class="title_num">99+条评论</view>
					<text class="iconfont close_icon" @click="closeMessageBox">&#xe615;</text>
					<view class="list_box">
						<view class="list">
							<view class="head_img">
								<image src="/static/img/img01.png" class="img" mode="scaleToFill"></image>
							</view>
							<view class="mes_b">
								<view class="name">
									<view>
										iris宝贝<text>刚刚</text>
									</view>
									<view class="zan">
										<view class="iconfont zans">&#xe61e;</view>
										<view>99+</view>
									</view>
								</view>
								<view class="des">喜欢这样安静的读着只言片语，慢慢懂得其中的道理。你也来试试看录一段你喜欢的文段吧！你会喜欢上这…</view>
								<view class="hui_fu">
									<text class="hui_fu_name">回复iris宝贝：</text>
									<text class="hui_fu_des">对啊，一起来读读看</text>
									<text class="delete">删除</text></view>

							</view>
						</view>
						<view class="list">
							<view class="head_img">
								<image src="/static/img/img01.png" class="img" mode="scaleToFill"></image>
							</view>
							<view class="mes_b">
								<view class="name">
									<view>
										iris宝贝<text>刚刚</text>
									</view>
									<view class="zan">
										<view class="iconfont zans">&#xe61e;</view>
										<view>99+</view>
									</view>
								</view>
								<view class="des">喜欢这样安静的读着只言片语，慢慢懂得其中的道理。你也来试试看录一段你喜欢的文段吧！你会喜欢上这…</view>
								<view class="delete">删除</view>
							</view>
						</view>
						<view class="list">
							<view class="head_img">
								<image src="/static/img/img01.png" class="img" mode="scaleToFill"></image>
							</view>
							<view class="mes_b">
								<view class="name">
									<view>
										iris宝贝<text>刚刚</text>
									</view>
									<view class="zan">
										<view class="iconfont zans">&#xe61e;</view>
										<view>99+</view>
									</view>
								</view>
								<view class="des">喜欢这样安静的读着只言片语，慢慢懂得其中的道理。你也来试试看录一段你喜欢的文段吧！你会喜欢上这…</view>
								<view class="delete">删除</view>
							</view>
						</view>
<!--						<input class="uni-input" placeholder-class="input-placeholder" type="text" placeholder="试着夸赞一下吧～" />-->
						<view class="input_box">
							<input class="input_w" placeholder-class="input-placeholder" type="text" placeholder="试着夸赞一下吧～" />
							<view class="input_btn">发送</view>
						</view>
					</view>

				</view>
			</uni-popup>
		</view>

	</view>
</template>

<script>
	import {uniPopup} from "@dcloudio/uni-ui"
	var sys = uni.getSystemInfoSync();
	var sysheight = sys.windowHeight;
	var baseCenter = sys.windowHeight / 2;
	export default {
		components: {uniPopup},
		data() {
			return {
				current: 0,
				swiperHeight:'',
				indicatorDots: false,
				autoplay: false,
				interval: 2000,
				vertical: true,
				showShareBox: false,
				autoplays: false,
				direction: 1000,
				duration: 800,
				videoList: [
					{
						vid: 1,
						gushiname:'宝宝巴士·成语故事',
						username: 'iris宝贝',
						content: '喜欢这样安静的读着只言片语喜欢这样安静的读着只言片语喜欢这样安静的读着只言片语，慢慢懂得其中的道理。你也来试试看录一段你喜欢的文段吧！你会喜欢上这种感觉的！',
						url: 'https://video.pearvideo.com/mp4/adshort/20190528/cont-1559562-13954647_adpkg-ad_hd.mp4',
						follow: false
					},
					{
						vid: 2,
						gushiname:'宝宝巴士·成语故事',
						username: 'Fires',
						content: '年轻的时候要注意‘养生’，少玩手机多睡觉！少玩手机多睡觉！少玩手机多睡觉！切记少玩手机多睡觉！少玩手机多睡觉！少玩手机多睡觉！@ 抖音小助手',
						url: 'https://video.pearvideo.com/mp4/adshort/20190528/cont-1559562-13954647_adpkg-ad_hd.mp4',
						follow: false
					},
					{
						vid: 3,
						gushiname:'宝宝巴士·成语故事',
						username: 'Firxes',
						content: 'a年轻的时候要注意‘养生’，少玩手机多睡觉！少玩手机多睡觉！少玩手机多睡觉！切记少玩手机多睡觉！少玩手机多睡觉！少玩手机多睡觉！@ 抖音小助手',
						url: 'https://video.pearvideo.com/mp4/adshort/20190528/cont-1559562-13954647_adpkg-ad_hd.mp4',
						follow: false
					},
					{
						vid: 4,
						gushiname:'宝宝巴士·成语故事',
						username: 'Firesb',
						content: 'b年轻的时候要注意‘养生’，少玩手机多睡觉！少玩手机多睡觉！少玩手机多睡觉！切记少玩手机多睡觉！少玩手机多睡觉！少玩手机多睡觉！@ 抖音小助手',
						url: 'https://video.pearvideo.com/mp4/adshort/20190528/cont-1559562-13954647_adpkg-ad_hd.mp4',
						follow: false
					}
				],
				playIngIndex: 0,
				videoContext: null,
				timer: null
			};
		},
		methods: {
			getMessage(){
				this.$refs.message.open()
			},
			closeMessageBox(){
				this.$refs.message.close()
			},
			//视频操作
			// onSwipScroll: function(event) {
			// 	this.playIngIndex = event.detail.current;
			// 	this.timer = setTimeout(
			// 			function() {
			// 				this.playVideo();
			// 			}.bind(this),
			// 			200
			// 	);
			// },

			playVideo: function() {
				//暂停
				if (this.playIngIndex != 0) {
					var upid = this.playIngIndex - 1;
					var doid = this.playIngIndex + 1;
					this.videoContext = uni.createVideoContext('video_' + upid);
					this.videoContext.pause();
					this.videoContext = uni.createVideoContext('video_' + doid);
					this.videoContext.pause();
					this.videoContext = uni.createVideoContext('video_' + this.playIngIndex);
					this.videoContext.play();
				} else {
					this.videoContext = uni.createVideoContext('video_1');
					this.videoContext.pause();
					this.videoContext = uni.createVideoContext('video_' + this.playIngIndex);
					this.videoContext.play();
				}
				// 计算一下需要播放的视频
			},

			//改变收藏状态
			changeFollow(item, index) {
				this.videoList[index].follow = !this.videoList[index].follow;
			},
			changeShare() {
				this.showShareBox = true;
			}
		},
		mounted() {
			let _self = this;
			uni.getSystemInfo({
				success: function(res) {
					_self.swiperHeight = res.windowHeight + 'px';
				}
			});
			// this.playVideo();
		}
	};
</script>

<style lang="scss">
	.find{
		.find_message{
			.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
				height: 870upx;

				border-radius: 40upx 40upx 0 0;
				background-color:$uni-color-fffbf0;
			}
			.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box{
				padding: 0upx;
			}
			.popup_box{
				width: 100%;
				height: 100%;
				padding: 0 50upx;
				box-sizing: border-box;
				position: relative;
				.close_icon{
					position: fixed;
					z-index: 100;
					top: 26upx;
					right: 61upx;
					color: $uni-color-876a48;
					font-size: 30upx;
					transform: rotate(-45deg);
				}
				.title_num{
					box-sizing: border-box;
					width: 650upx;
					position: fixed;
					top: 0px;
					left: 0px;
					z-index: 100;
					height: 84upx;
					font-size:$uni-font-size-16 ;
					color: $uni-color-664e37;
					line-height: 84upx;
					border-bottom: 2upx solid #e0e0e0;
					margin: 0 50upx;
					text-align: center;
					background-color: $uni-color-fffbf0;
				}
				.list_box{
					overflow-y: scroll;
					padding:104upx 0 170upx ;
					.list{
						display: flex;
						margin-top: 45upx;
						.head_img{
							width: 70upx;
							height: 70upx;
							border-radius: 50%;
							box-sizing: border-box;
							border: 4upx solid $uni-color-fcb300;
							.img{
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
						.mes_b{
							width: 556upx;
							box-sizing: border-box;
							padding: 20upx;
							font-size: $uni-font-size-14;
							color: $uni-color-664e37;
							margin-left: 20upx;
							border-radius:10upx ;
							box-shadow: 0upx 0upx 6upx rgba(0, 0, 0, 0.16);
							.name{
								font-size: $uni-font-size-13;
								color:$uni-color-876a48 ;
								line-height: 38upx;
								display: flex;
								justify-content: space-between;
								text{
									position: relative;
									z-index: 0;
									font-size: $uni-font-size-sm;
									color:$uni-color-876a48 ;
									opacity: 0.5;
									padding-left: 15upx;
								}
							}
							.zan{
								display: flex;
								color:$uni-color-876a48 ;
								font-size: 24upx;
								.zans{
									font-size: 24upx;
									padding-right: 4upx;
								}
							}
							.delete{
								font-size: $uni-font-size-sm;
								color: #f04545;
								padding-top: 10upx;
							}
							.hui_fu{
								.hui_fu_name{
									color: #fcb300;
								}
								.hui_fu_des{
									padding-right: 11upx;
								}
							}
						}
					}
				}
				.input_box{
					box-sizing: border-box;
					position: fixed;
					bottom: 0upx;
					left: 0upx;
					width: 100%;
					height: 140upx;
					box-shadow: 0upx 0upx 6upx rgba(0, 0, 0, 0.06);
					background-color: #fff;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 30upx;
					box-sizing: border-box;
					.input-placeholder{
						font-size: $uni-font-size-13;
						color: $uni-color-664e37;
						opacity: 0.5;
					}
					.input_w{
						box-sizing: border-box;
						width: 500upx;
						height: 80upx;
						background-color: $uni-color-fffbf0;
						border-radius: 56upx;
						padding-left: 30upx;
						font-size: $uni-font-size-13;
						color: $uni-color-664e37;
					}
					.input_btn{
						width:160upx ;
						height: 80upx;
						background-color: $uni-color-fcb300;
						color: #fff;
						font-size: $uni-font-size-base;
						text-align: center;
						line-height: 80upx;
						border-radius: 56upx;
					}
				}
			}

		}
		.swipe{
			width: 100%;
			height: 100%;
			.bg_img{
				width: 100%;
				height: 100%;
			}

		}
		/*.video {*/
		/*	object-fit: fill !important;*/
		/*	z-index: 999;*/
		/*	width: 100%;*/
		/*	height: 100%;*/
		/*	position: absolute;*/
		/*	left: 0;*/
		/*	top: 0;*/
		/*	overflow: hidden;*/
		/*}*/
		.plays{
			position: absolute;
			top: 0upx;
			left: 0upx;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.play_begin{
				z-index: 100;
				width:155upx ;
				height:155upx ;
				border-radius: 50%;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				opacity: 0.9;
				.play{
					color: $uni-color-fcb300;
					font-size: 66upx;
					position: relative;
					right: -10upx;
				}
			}
		}

		.tools_right {
			z-index: 1001;
			position: absolute;
			right: 53upx;
			bottom: 271upx;
			.tools_r_li {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 40upx;
				color: #fff;
				font-size: $uni-font-size-13;
				.play_icon{
					font-size: 55upx;
				}
			}
			.tools_r_li:last-child {
				margin-bottom: 0px;
			}
			.tools_r_num{
				color: #F4F5F6;
			}
		}
		.load{
			box-sizing: border-box;
			width: 80upx;
			height: 80upx;
			border: 4upx solid $uni-color-fcb300;
			border-radius: 50%;
			z-index: 100;
			position: absolute;
			right:40upx;
			bottom: 145upx;
			overflow: hidden;
			.img{
				width: 100%;
				height: 100%;
			}
		}
		.production_box {
			width: 520upx;
			z-index: 100;
			position: absolute;
			left:40upx;
			bottom: 40upx;
			color: #fff;
			box-sizing: border-box;
			.production_gushiname{
				font-size: $uni-font-size-base;
				line-height: 48upx;
			}
			.production_name {
				font-size: $uni-font-size-13;
				line-height: 38upx;
				padding-bottom: 10px;
			}
			.production_des {
				width: 100%;
				font-size: $uni-font-size-13;
				line-height: 38upx;
				overflow: hidden;
				display: -webkit-box;//将元素设为盒子伸缩模型显示
				-webkit-box-orient: vertical;//伸缩方向设为垂直方向
				-webkit-line-clamp: 3;//超出3行隐藏，并显示省略号
			}
			.i_to_lu{
				width:200upx ;
				height: 66upx;
				background-color: $uni-color-fcb300;
				border-radius: 34upx;
				text-align: center;
				line-height: 66upx;
				font-size: 30upx;
				margin-top: 40upx;
			}
		}

	}

</style>
